<template>
  <div class="xtx-pagination">
    <a
      v-if="pageCount > btnCount"
      href="javascript:;"
      :class="{ disabled: myCurrentPage === 1 }"
      @click="myCurrentPage--"
      >上一页</a
    >
    <span v-show="showLeft">...</span>
    <a
      href="javascript:;"
      v-for="item in page.btnArr"
      :key="item"
      @click="handleCurrent(item)"
      :class="{ active: myCurrentPage === item }"
    >
      {{ item }}
    </a>
    <!-- :class="{active:page.}" -->
    <span v-show="showRight">...</span>
    <a
      v-if="pageCount > btnCount"
      href="javascript:;"
      @click="myCurrentPage++"
      :class="{ disabled: myCurrentPage === pageCount }"
      >下一页</a
    >
  </div>
</template>
<script>
import { computed, watch, ref } from 'vue'
export default {
  name: 'XtxPagination',
  props: {
    total: {
      type: Number,
      default: 100
    },
    pageSize: {
      type: Number,
      default: 10
    },
    currentPage: {
      type: Number,
      default: 1
    },
    btnCount: {
      type: Number,
      default: 5
    }
  },
  setup (props, { emit }) {
    const myTotal = ref(100) // 总条数
    const myPageSize = ref(10) // 页容量
    const myCurrentPage = ref(1) // 当前页码
    const btnCount = ref(5) // 按钮个数

    watch(
      props,
      () => {
        myTotal.value = props.total
        myPageSize.value = props.pageSize // 页容量
        myCurrentPage.value = props.currentPage // 当前页码
        btnCount.value = props.btnCount // 按钮个数
      },
      { deep: true, immediate: true }
    )

    // 总页码 = 总条数 / 页容量，向上取整
    const pageCount = computed(() =>
      Math.ceil(myTotal.value / myPageSize.value)
    )

    // 切换页码
    const handleCurrent = index => {
      if (myCurrentPage.value === index) return
      myCurrentPage.value = index
    }

    // 子传父页码
    watch(myCurrentPage, val => emit('update:currentPage', val))

    // 页码边界值
    watch(myCurrentPage, val => {
      if (val < 1) myCurrentPage.value = 1
      if (val > pageCount.value) myCurrentPage.value = pageCount.value
    })
    if (myCurrentPage.value < 1) myCurrentPage.value = 1

    // 根据数据计算出（起始页码，结束页码，总页码，按钮数组）
    const page = computed(() => {
      let start = myCurrentPage.value - Math.floor(btnCount.value / 2)
      let end = start + btnCount.value - 1
      // 如果起始页码小于1了，需要重新计算
      if (start < 1) {
        // console.log('start太小了')
        start = 1
        const endTemp = start + btnCount.value - 1
        end = endTemp > pageCount.value ? pageCount : endTemp
      }
      // 如果结束页码大于总页数，需要重新计算
      if (end > pageCount.value) {
        // console.log('end太大了')
        end = pageCount.value
        const startTemp = end - btnCount.value + 1
        start = startTemp < 1 ? 1 : startTemp
      }
      // 渲染的按钮数组
      const btnArr = []
      for (let i = start; i <= end; i++) {
        btnArr.push(i)
      }

      return { pageCount, start, end, btnArr }
    })

    const showRight = computed(
      () =>
        pageCount.value - myCurrentPage.value > Math.floor(btnCount.value / 2)
    )
    const showLeft = computed(
      () => myCurrentPage.value > Math.ceil(btnCount.value / 2)
    )

    return {
      page,
      myCurrentPage,
      myPageSize,
      handleCurrent,
      pageCount,
      showRight,
      showLeft
    }
  }
}
</script>
<style scoped lang="less">
.xtx-pagination {
  display: flex;
  justify-content: center;
  padding: 30px;
  > a {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    margin-right: 10px;
    &:hover {
      color: @xtxColor;
    }
    &.active {
      background: @xtxColor;
      color: #fff;
      border-color: @xtxColor;
    }
    &.disabled {
      cursor: not-allowed;
      opacity: 0.4;
      &:hover {
        color: #333;
      }
    }
  }
  > span {
    margin-right: 10px;
  }
}
</style>
